@charset "utf-8";
/* CSS Document */
.slideBox{ 
	width:1920px; 
	height:480px; 
	overflow:hidden;
	position:relative;
	border:1px solid #ddd;
	left: 50%;
	right: 50%;
	margin-left:-960px;  
}
.slideBox .hd{
 height:15px; 
 overflow:hidden; 
 position:absolute;
 margin:0 auto; 
 left:50%;
 right:5px;
 margin-left:-25px;
 bottom:5px;
  z-index:1; 
  
}
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
.slideBox .hd ul li{ float:left;border-radius: 50%; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#1fabe3; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0;   }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:1920px; height:480px; display:block;  }

/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
.slideBox .prevStop{ display:none;  }
.slideBox .nextStop{ display:none;  }
/*banner*/
.indexMain{
	background: #fff;
}
.banner{
	position: relative;
	width:100%;
	overflow:hidden;
}
.bannertext{
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;
	margin-left:-581px;
	width: 1162px;
	height: 480px;
	text-align: center;
}
.bannertext h2{
	color:#fff;
	font:bold 36px/36px "微软雅黑";
	margin-top:106px;
	margin-bottom: 43px;
}
.bannertext p{
	color:#fff;
	font:20px/24px "微软雅黑";
	width: 528px;
	margin:0 auto;
	text-align: left;
}
.click-info{
	margin:0 auto;
	width: 190px;
	height: 50px;
	border-radius: 10px;
	color:#fff;
	font:20px/50px "微软雅黑";
	border:2px solid #fff;
	margin-top:84px;
}
/**/
.noticeBox{
	width: 1122px;
	margin:0 auto;
	padding:14px 0;
	overflow: hidden;
}
.noticeBox i{
	width: 22px;
	height: 16px;
	background:url(../img/icon_notice.png) no-repeat;
	float: left;
}
.noticeBox  .bd{
	float: left;
	width: 1000px;
	padding:0 50px;
}
.noticeBox p,.noticeBox  li{
	display: inline-block;
	float: left;
	width: 1000px;
	line-height: 16px;
	height: 16px;
	overflow: hidden;
	text-align: center;
	
}
.picBigBox{
	position: relative;
	width: 100%;
	height: 306px;
	border:1px solid #ccc;
	border-left: 0;
	border-right: 0;
	overflow:hidden;
}
.leftPicBox{
	width: 50%;
	float: left;
	background: #fafafa;
	height: 306px;
}
.rightPicBox{
	width: 50%;
	float: right;
	background: #f4f4f4;
	height: 306px;
}
.picBigbox-content{
	width: 1120px;
	margin:0 auto;
	position: absolute;
	top: 0;
	right: 50%;
	left: 50%;
	margin-left:-560px;
	height: 306px;
}
.picBigbox-content li{
	float:left;
	width: 46%;
	padding:0 2%;
}
.picBigbox-content li span{
	
}

.picBiglist1 i{
	float: left;
	background:url(../img/img_index1.png) no-repeat;
	width: 214px;
	height: 127px;
	margin-top:78px;
}
.picBiglist1{
	position: absolute;
	left:-1000px;
}
.picBiglist1_dh{
	position: absolute;
	top: 0;
	left:0px;
	animation:topleft 1.5s ease;
}
@keyframes topleft{
	0%{left:-300px; opacity:0;}	
	100%{left:0px; opacity:1;}
}
.picBiglist1 span{
	float:left;
	width: 300px;
	margin-top:44px;
}
.picBigbox-content h4{
	font:24px/24px "微软雅黑";
	margin-bottom: 36px;
}
.picBigbox-content p{
	font:16px/30px "微软雅黑";
}
.picBiglist1 span h4{
	color:#73bed4;
}
.picBiglist1 span p{
	color:#73bed4;
}
.picBigbox-content a{
	border:0;
	width: 190px;
	height: 50px;
	line-height:50px;
	font-size:14px;
	border-radius: 8px;
	margin-top:30px;
	display:block;
	text-align:center;
	font-weight: bold;
	font-family: "微软雅黑";
}
.picBiglist2{
	position: absolute;
	right: -1000px;
}
.picBiglist2_dh{
	position: absolute;
	top: 0;
	right: 0px;
	animation:topright 1.5s ease
}

@keyframes topright{
	0%{right:-300px; opacity:0;}	
	100%{right:0px; opacity:1;}
}
.picBiglist2 i{
	float: left;
	background:url(../img/img_index2.png) no-repeat;
	width: 178px;
	height: 135px;
	margin-top:78px;
}
.picBiglist2 span{
	float:left;
	width: 300px;
	margin-top:44px;
}
.picBiglist2 span h4{
	color:#515151;
}
.picBiglist2 span p{
	color:#515151;
}
.picBiglist1 a{
	background:none;
	border:2px solid #3ea4b8;
	color: #40a4b7;
}
.picBiglist2 a{
	background:none;
	border:2px solid #3ea4b8;
	color: #40a4b7;
}
.picBiglist1 a:hover,.picBiglist2 a:hover{
	background: #3ba9c5;
	border:2px solid #3ba9c5;
	color: #fff;
}
.abilityContent{
	font-family: "微软雅黑";
	width: 1162px;
	margin: 0 auto;
}
.abilityContent h3{
	font-size: 36px;
	margin-top:128px;
	font-weight: normal;
	
	text-align:center;
}
.fourPic li{
	width: 188px;
	margin:0 51px;
	float: left;
	text-align: center;
}
.fourPic li i{
	width: 188px;
	height: 189px;
	display: inline-block;
	margin:0 auto;
}
.fourPic li p{
	font-size: 24px;
	margin-top:36px;
	margin-bottom: 52px;
}
.icon_index1 i{
	background:url(../img/icon_index1.png) no-repeat;
}
.icon_index2 i{
	background:url(../img/icon_index2.png) no-repeat;
}
.icon_index3 i{
	background:url(../img/icon_index3.png) no-repeat;
}
.icon_index4 i{
	background:url(../img/icon_index4.png) no-repeat;
}
.icon_index1 .back i{
	background:url(../img/icon_index1_back.png) no-repeat;
}
.icon_index2 .back i{
	background:url(../img/icon_index2_back.png) no-repeat;
}
.icon_index3 .back i{
	background:url(../img/icon_index3_back.png) no-repeat;
}
.icon_index4 .back i{
	background:url(../img/icon_index4_back.png) no-repeat;
}
.icon_tools{
	background:url(../img/icon_tools.png) no-repeat;
	margin: 0 auto;
	width: 252px;
	height: 22px;
	margin-top:30px;
	margin-bottom: 54px;
}
.icon_pen{
	background:url(../img/icon_tools.png) no-repeat;
	margin: 0 auto;
	width: 252px;
	height: 22px;
	margin-top:30px;
	margin-bottom: 54px;
}
.serverability{
	width: 1170px;
	overflow: hidden;
	margin: 0 auto;
}
.serverPicBox{
	width: 1188px;
}
.serverPicBox li{
	width: 366px;
	margin-left: 4px;
	margin-right:24px;
	overflow: hidden;
	height: 554px;
	border: 1px solid #ccc;
	float: left;
	margin-bottom: 22px;
	border-radius: 10px;
}
.serverPicBox li:hover{
	box-shadow: 0px 0px 5px #888888;
}
.serverPicBox i{
	display: inline-block;
	width: 92px;
	height: 92px;
	background:url(../img/icon_picserver.png) no-repeat;
	font-style: normal;
	font: 18px/92px "黑体";
	text-align: center;
	color: #fff;
	margin-top: -46px;
	margin-left: 14px;
}
.serverPicBox h5{
	font-size: 18px;
	margin-left: 14px;
	margin-top:30px;
	font-family: "微软雅黑";
	color: #2b2b2b;

}
.serverPicBox em{
	width: 100px;
	height: 1px;
	background: #ccc;
	margin-top: 50px;
	margin-left: 14px;
	display: inline-block;
}
.serverPicBox p{
	font:14px/22px "微软雅黑";
	
	color: #8a8d8d;
	margin-top: 16px;
	padding:0 14px;
}
/*content*/
.Solution{
	background:url(../img/pic_index.png) no-repeat center;
	background-size:cover;
	width: 100%;
	height: 870px;
	margin:0 auto;
	margin-top:130px;
	background-color: #fff;
	overflow:hidden;
}
.SolutionBox{
	width: 1162px;
	margin:0 auto;
	position:relative;


}
.SolutionBox h3{
	font-size: 36px;
	margin-top:128px;
	font-weight: normal;
	
	text-align:center;
	color: #fff;
	font-family: "微软雅黑";

}
.icon_solution{
	background:url(../img/icon_solution.png) no-repeat;
	margin: 0 auto;
	width: 252px;
	height: 23px;
	margin-top:30px;
	margin-bottom: 76px;
}
.solution_BtnBox{
	margin:0 auto;
	overflow: hidden;
	width: 780px;
}
.solution_BtnBox li{
	float:left;
	width: 120px;
	margin:0 16px;
	border:2px solid #fff;
	color:#fff;
	font:16px/40px "微软雅黑";
	height: 40px;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
}
/*首页下动画*/
.solution_moveBox{
	width: 780px;
	margin:0 auto;
	
	margin-top:48px;
	height: 360px;
	
}

.solution_moveBox li{
	padding:13px 0px;	
	overflow: hidden;
}
.solution_moveBox li em{
	width: 16px;
	height: 16px;
	background:#fff;
	border-radius: 50%;
	float: left;
}
.solution_moveBox li p{
	float: left;
	font:16px/16px "微软雅黑";
	margin-left: 12px;
	color: #fff;
}

.solution_moveBoxUL_dh{
	position: absolute;
	top: 360px;	
	left:250px;
	animation:bottomleft 1.5s ease;
	
}
	@keyframes bottomleft{
	0%{left:0; opacity:0;}	
	100%{left:250px; opacity:1;}

}
.pic_solution_dh{
	background:url(../img/pic_solution.png) no-repeat;
	width: 355px;
	height: 355px;
	position: absolute;
	right: 180px;
	top: 260px;
	animation:bottomright 1.5s ease;
}
	@keyframes bottomright{
	0%{right:0; opacity:0;}	
	100%{right:180px; opacity:1;}

}
/*动画UL1*/
.solution_moveBox2{
	width: 780px;
	margin:0 auto;
	
	margin-top:48px;
	height: 360px;
	
}

.solution_moveBox2 li{
	padding:13px 0px;	
	overflow: hidden;
}
.solution_moveBox2 li em{
	width: 16px;
	height: 16px;
	background:#fff;
	border-radius: 50%;
	float: left;
}
.solution_moveBox2 li p{
	float: left;
	font:16px/16px "微软雅黑";
	margin-left: 12px;
	color: #fff;
}

/*动画UL2*/
.solution_moveBox3{
	width: 780px;
	margin:0 auto;
	
	margin-top:48px;
	height: 360px;
	
}

.solution_moveBox3 li{
	padding:13px 0px;	
	overflow: hidden;
}
.solution_moveBox3 li em{
	width: 16px;
	height: 16px;
	background:#fff;
	border-radius: 50%;
	float: left;
}
.solution_moveBox3 li p{
	float: left;
	font:16px/16px "微软雅黑";
	margin-left: 12px;
	color: #fff;
}

/*动画UL3*/
.solution_moveBox4{
	width: 780px;
	margin:0 auto;
	
	margin-top:48px;
	height: 360px;
	
}

.solution_moveBox4 li{
	padding:13px 0px;	
	overflow: hidden;
}
.solution_moveBox4 li em{
	width: 16px;
	height: 16px;
	background:#fff;
	border-radius: 50%;
	float: left;
}
.solution_moveBox4 li p{
	float: left;
	font:16px/16px "微软雅黑";
	margin-left: 12px;
	color: #fff;
}

/*动画UL4*/
.solution_moveBox5{
	width: 780px;
	margin:0 auto;
	
	margin-top:48px;
	height: 360px;
}

.solution_moveBox5 li{
	padding:13px 0px;	
	overflow: hidden;
}
.solution_moveBox5 li em{
	width: 16px;
	height: 16px;
	background:#fff;
	border-radius: 50%;
	float: left;
}
.solution_moveBox5 li p{
	float: left;
	font:16px/16px "微软雅黑";
	margin-left: 12px;
	color: #fff;
}

/*动画UL5*/
.linkBox{
	height: 782px;
	width: 100%;
	background:url(../img/bottom-bg.png);
	margin: 0 auto;
	
}
.linkBox h3{
	font-size: 36px;
	padding-top:50px;
	font-weight: normal;	
	text-align:center;
	color: #1e1e1e;
	font-family: "微软雅黑";
}
.pic_link{
	background:url(../img/pic_link.png) no-repeat;
	margin: 0 auto;
	width: 252px;
	height: 23px;
	margin-top:30px;
	margin-bottom: 76px;
}
.linkBox ul{
	width: 1272px;
	margin:0 auto;
	overflow: hidden;
}
.linkBox ul li{
	
	margin:0 56px;
	float:left;
	margin-bottom: 66px;
	width: 312px;
	height: 112px;
	
}
.link_jd{	
	background:url(../img/pic_jd_g.png) no-repeat;
}
.link_jd:hover{	
	background:url(../img/pic_jd_c.png) no-repeat;
}
.link_yk{
	background:url(../img/pic_youku_g.png) no-repeat;
}
.link_yk:hover{
	background:url(../img/pic_youku_c.png) no-repeat;
}
.link_360{
	background:url(../img/pic_360_g.png) no-repeat;
}
.link_360:hover{
	background:url(../img/pic_360_c.png) no-repeat;
}
.link_qtfm{
	background:url(../img/pic_qtfm_g.png) no-repeat;
}
.link_qtfm:hover{
	background:url(../img/pic_qtfm_c.png) no-repeat;
}
.link_klfm{
	background:url(../img/pic_klfm_g.png) no-repeat;
}
.link_klfm:hover{
	background:url(../img/pic_klfm_c.png) no-repeat;
}
.link_qqmusic{
	background:url(../img/pic_qqmusic_g.png) no-repeat;
}
.link_qqmusic:hover{
	background:url(../img/pic_qqmusic_c.png) no-repeat;
}
.link_jcwx{
	background:url(../img/pic_jcwx_g.png) no-repeat;
}
.link_jcwx:hover{
	background:url(../img/pic_jcwx_c.png) no-repeat;
}
.link_dhst{
	background:url(../img/pic_dhst_g.png) no-repeat;
}
.link_dhst:hover{
	background:url(../img/pic_dhst_c.png) no-repeat;
}
.link_letv{
	background:url(../img/pic_letv_g.png) no-repeat;
}
.link_letv:hover{
	background:url(../img/pic_letv_c.png) no-repeat;
}
/*翻转动画*/
		/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 188px;
	/*height: 301px;*/
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	position: relative;
	z-index: 9;
}

/*submenu*/
.subMenu{
	background:url(../images/bannerback.png);
	position:absolute;
	font-size:0; 
	z-index:2;
	padding-top:0px;
	top: 66px;	
	margin: 0 auto;
	left:50%;
	right: 50%;
	margin-left:-70px;
	width: 140px;
}
.navsubBox .subMenu li{
	border-bottom: 1px dotted #ccc;
	padding:10px 0;	
	display:block;
	background: #fff;
	padding:20px 0;
	width: 140px;
	color:#999;
	text-align: center;
	font:12px/12px "微软雅黑";	

}
.navsubBox .subMenu a{
	
}
.navfade{
	margin:0 auto;
	width: 1920px;
	position:fixed; 
	top:0;
	z-index:888;
	display:none;
}

/*退出弹框*/
.back-contain{
	position:absolute;
	z-index:9999;
	top:50%;
	left:50%;
	margin-left:-209px;
	margin-top:-150px;
	width:418px;
	height:300px;
	background:#FFFFFF;
	border-radius:5px;
	display:none;
}
.back-bg{position:fixed;z-index:9998;top:0;left:0;display:none;width:100%;height:100%;background:#000;opacity:0.5;}
.back-wit{
	position: relative;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	background: url(../img/top-bg.png) no-repeat center;
    background-size: cover;
}
.back-wit p{
	height: 66px;
    line-height: 66px;
    text-align: center;
    font-size: 24px;
    color: #FFFFFF;
}
.back-wit a {
    position: absolute;
    right: 15px;
    top: 18px;
    width: 24px;
    height: 24px;
    background: url(../img/close.png) no-repeat center;
    background-size: cover;
}
.back-true{margin-top:70px;text-align:center;}
.back-true{padding-left:50px;font-size:24px;color:#6c6c6c;height:34px;line-height:34px;
	background-image:url(../img/icon1.png);
	background-repeat:no-repeat;
	background-size:34px 34px;
	background-position:120px 0;
}
.back-btn{width:100%;height:44px;margin-top:62px;text-align:center;}
.back-btn button{margin:0 10px;width:140px;height:44px;border-radius:3px;font-size:18px;}
.back-btn button:first-child{border:none;background:#1faae3;color:#fff;}
.back-btn button:last-child{border:1px solid #d8d8d8;background:#fff;color:#6c6c6c;} 

